<template>
  <Views>
    <!-- <div class="home"> -->
      <Menus :visible="displayMenu" />
      <div class="banner">
        <div class="banner-bg"></div>
        <div class="container">
          <div class="title text-black">
            <h1 class="text-28">淮岸放生</h1>
            <h1 class="text-28">积功德保平安</h1>
          </div>
          <div class="desc">
            <p class="text-m text-black">十善之首是放生</p>
            <p class="text-m text-black">十恶之首为杀生</p>
          </div>
          <div class="arrow">
            <img src="https://www.weibangong.com/web-static/main/images/mobile/arrow-banner.png" alt="淮岸放生--向下箭头">
          </div>
        </div>
      </div>
      <div class="product">
        <div class="title">
          <Title bg-text="PRODUCT" title="产品与服务" remark="科学、生态、诚信、诚心" />
        </div>
        <div class="ptabs">
          <Swiper class="h-swiper" :spaceBetween="20" :callback="humanSwiper" :loop="true" :effect="'slide'" :changeStart="transitionStart">
            <Slide class="slide">
              <div class="human" @click="skipSite(1)">
                <div class="h-top">
                  <img src="https://static.weibangong.com/files/5d103628141fc22956bf37af-big" alt="淮岸放生">
                  <p class="text-white text-l">科学放生</p>
                  <!-- <p class="text-white text-l">薪社汇</p> -->
                </div>
                <div class="h-bottom">
                  <div class="h-text">
                    <img src="../../assets/check-blue.png" alt="淮岸放生">
                    <p class="text-mark3">严格遵守当地生态</p>
                  </div>
                  <div class="h-text">
                    <img src="../../assets/check-blue.png" alt="淮岸放生">
                    <p class="text-mark3">水产类全程打氧</p>
                  </div>
                  <div class="h-text">
                    <img src="../../assets/check-blue.png" alt="淮岸放生">
                    <p class="text-mark3">保证生物鲜活放生</p>
                  </div>
                </div>
              </div>
            </Slide>
            <Slide class="slide">
              <div class="human" @click="skipSite(2)">
                <div class="h-top h-top-yellow">
                  <img src="https://static.weibangong.com/files/5d103628141fc22956bf37b2-big" alt="淮岸放生">
                  <p class="text-white text-l">安全放生</p>
                  <!-- <p class="text-white text-l">乐接活</p> -->
                </div>
                <div class="h-bottom">
                  <div class="h-text">
                    <img src="../../assets/check-yellow.png" alt="淮岸放生">
                    <p class="text-mark3">杜绝进入已污染环境</p>
                  </div>
                  <div class="h-text">
                    <img src="../../assets/check-yellow.png" alt="淮岸放生">
                    <p class="text-mark3">杜绝放生后重新捕捞</p>
                  </div>
                  <div class="h-text">
                    <img src="../../assets/check-yellow.png" alt="淮岸放生">
                    <p class="text-mark3">杜绝破坏当地生态</p>
                  </div>
                </div>
              </div>
            </Slide>
            <Slide class="slide">
              <div class="human" @click="skipSite(3)">
                <div class="h-top">
                  <img src="https://static.weibangong.com/files/5d103628141fc22956bf37b1-big" alt="淮岸放生">
                  <p class="text-white text-l">诚信放生</p>
                  <!-- <p class="text-white text-l">微办公</p> -->
                </div>
                <div class="h-bottom">
                  <div class="h-text">
                    <img src="../../assets/check-blue.png" alt="淮岸放生">
                    <p class="text-mark3">生物质量保证</p>
                  </div>
                  <div class="h-text">
                    <img src="../../assets/check-blue.png" alt="淮岸放生">
                    <p class="text-mark3">放生售后保证</p>
                  </div>
                  <div class="h-text">
                    <img src="../../assets/check-blue.png" alt="淮岸放生">
                    <p class="text-mark3">视频拍摄声临其境</p>
                  </div>
                </div>
              </div>
            </Slide>
            <Slide class="slide">
              <div class="human" @click="skipSite(4)">
                <div class="h-top h-top-yellow">
                  <img src="https://static.weibangong.com/files/5d103628141fc22956bf37b0-big" alt="淮岸放生">
                  <p class="text-white text-l">诚心放生</p>
                  <!-- <p class="text-white text-l">不木钱包</p> -->
                </div>
                <div class="h-bottom">
                  <div class="h-text">
                    <img src="../../assets/check-yellow.png" alt="淮岸放生">
                    <p class="text-mark3">善待生物</p>
                  </div>
                  <div class="h-text">
                    <img src="../../assets/check-yellow.png" alt="淮岸放生">
                    <p class="text-mark3">进入网站功德榜</p>
                  </div>
                  <div class="h-text">
                    <img src="../../assets/check-yellow.png" alt="淮岸放生">
                    <p class="text-mark3">诚心祈祷祝福</p>
                  </div>
                </div>
              </div>
            </Slide>
          </Swiper>
        </div>
      </div>
      <div class="advantage">
        <div class="title">
          <Title bg-text="ADVANTAGE" title="我们的优势" remark="原生态服务，原生态生物" />
        </div>
        <div class="a-cards">
          <div class="a-item">
            <div class="avader">
              <img class="a-1" src="../../assets/advant-1.png" alt="淮岸放生">
              <div class="bulk"></div>
            </div>
            <div class="text">
              <h1 class="text-xxl text-gray">地理位置</h1>
              <p class="text-m text-mark3">坐落淮河岸边</p>
              <p class="text-m text-mark3">附近涡河淝河等淮河支流</p>
            </div>
          </div>
          <div class="a-item">
            <div class="avader">
              <img class="a-2" src="../../assets/advant-2.png" alt="淮岸放生">
              <div class="bulk"></div>
            </div>
            <div class="text">
              <h1 class="text-xxl text-gray">丰富物种</h1>
              <p class="text-m text-mark3">淮河流域上万种水生物</p>
              <p class="text-m text-mark3">淮水清澈有天然放生条件</p>
            </div>
          </div>
          <div class="a-item">
            <div class="avader">
              <img class="a-3" src="../../assets/advant-3.png" alt="淮岸放生">
              <div class="bulk"></div>
            </div>
            <div class="text">
              <h1 class="text-xxl text-gray">水域辽阔</h1>
              <p class="text-m text-mark3">淮河流域多年平均径流量为621亿立方米</p>
              <p class="text-m text-mark3">梅雨季节更为庞大</p>
            </div>
          </div>
        </div>
      </div>
      <div class="customer">
        <div class="title">
          <Title bg-text="CUSTOMER" title="他们眼中的淮岸" remark="心中有善 造福一家" />
        </div>
        <div class="c-cards">
          <Swiper class="c-swiper" :spaceBetween="15" :callback="advSwiper" :loop="true" :effect="'slide'" :changeStart="transitionStart">
            <Slide class="slide">
              <div class="c-content">
                <div class="c-top">
                  <img class="c-dot-1" src="../../assets/dot-2.png" alt="淮岸放生">
                  <p class="text-mark3 text-m"> 我是一个做小生意的，10多年前机缘巧合之下拜在了如来佛祖脚下，每年农历3月14是我的生日，在这一天我都会放生一些鲤鱼。寓意转运事业旺盛，在淮岸放生已经连续3年了，值得信赖。</p>
                  <img class="c-dot-2" src="../../assets/dot-1.png" alt="淮岸放生">
                </div>
                <div class="c-bottom">
                  <div class="c-item">
                    <!-- <img src="../../assets/mengniu.png" alt="淮岸放生"> -->
                    <h1 class="text-m text-black">安徽省 蚌埠市 李先生</h1>
                    <p class="text-s text-black">职业：自己做点小生意</p>
                  </div>
                </div>
              </div>
            </Slide>
            <Slide class="slide">
              <div class="c-content">
                <div class="c-top">
                  <img class="c-dot-1" src="../../assets/dot-2.png" alt="淮岸放生">
                  <p class="text-mark3 text-m">在淮岸放生是经过一个朋友推荐来的，说这家靠谱，对于心存善念平时没有时间的人来说，是一个不错的方式。平时上班忙，想放生附近也没有好的环境，在淮岸放生帮我解决了我的难题。每次放生完都会拍一段视频给我包括周边的环境。很好自己找都不一定找得到。</p>
                  <img class="c-dot-2" src="../../assets/dot-1.png" alt="淮岸放生">
                </div>
                <div class="c-bottom">
                  <div class="c-item">
                    <!-- <img src="https://static.weibangong.com/files/5d11ea6a78b8946ae8fe1723-big" alt="淮岸放生"> -->
                    <h1 class="text-m text-black">甘肃省 白银 王女士</h1>
                    <p class="text-s text-black">职业：上班族</p>
                  </div>
                </div>
              </div>
            </Slide>
            <Slide class="slide">
              <div class="c-content">
                <div class="c-top">
                  <img class="c-dot-1" src="../../assets/dot-2.png" alt="淮岸放生">
                  <p class="text-mark3 text-m">我是一个开厂房的小老板，由于工作原因厂里的事情特别多，很多事情都要亲力亲为。受母亲的影响虔心信佛，记得小时候每个季度母亲都会带着我到附近的河边放生。但是现在由于工作原因实在无法分身，机缘巧合之下知道了淮岸放生终于让我再续善缘。感谢淮岸放生。</p>
                  <img class="c-dot-2" src="../../assets/dot-1.png" alt="淮岸放生">
                </div>
                <div class="c-bottom">
                  <div class="c-item">
                    <!-- <img src="../../assets/guang.png" alt="淮岸放生"> -->
                    <h1 class="text-m text-black">浙江省 绍兴市 吴先生</h1>
                    <p class="text-s text-black">职业：工厂老板</p>
                  </div>
                </div>
              </div>
            </Slide>
            <Slide class="slide">
              <div class="c-content">
                <div class="c-top">
                  <img class="c-dot-1" src="../../assets/dot-2.png" alt="淮岸放生">
                  <p class="text-mark3 text-m">退休之前每逢节假日都会去附近的寺庙放生，但是现在由于身体原因子女处于我的身体考虑不让出门太远，正好知道了淮岸放生不仅能帮我放生，而且还是在鱼米之乡真是太好了。祝福淮岸放生</p>
                  <img class="c-dot-2" src="../../assets/dot-1.png" alt="淮岸放生">
                </div>
                <div class="c-bottom">
                  <div class="c-item">
                    <!-- <img src="../../assets/guang.png" alt="淮岸放生"> -->
                    <h1 class="text-m text-black">安徽省 合肥市 张先生</h1>
                    <p class="text-s text-black">职业：退休老太太</p>
                  </div>
                </div>
              </div>
            </Slide>
          </Swiper>
        </div>
      </div>
      <!-- <div class="activities">
        <div class="title">
          <Title bg-text="ACTIVITIES" title="淮岸声音" remark="创造价值 携手共赢" />
        </div>
        <router-link :to="{path: '/details/' + item.id}" class="analyze" v-for="(item, index) in topList" :key="index">
          <div class="avader">
            <img :src="item.image" alt="淮岸放生">
          </div>
          <div class="text">
            <h1 class="text-l">{{item.title}}</h1>
            <p class="text-mark3 text-s line-clamp-two">{{item.message}}</p>
          </div>
        </router-link>
        <div class="a-tabs">
          <router-link :to="{path: '/details/' + item.id}" class="a-item" v-for="(item, index) in btmList" :key="index">
            <div class="avader">
              <img :src="item.image" alt="淮岸放生">
            </div>
            <div class="text">
              <p class="text-s line-clamp-two">{{item.title}}</p>
            </div>
          </router-link>
        </div>
      </div>
      <div class="cooperative">
        <div class="title">
          <Title bg-text="PARTNER" title="合作伙伴" remark=" " />
        </div>
        <div class="partener">
          <img src="../../assets/partner.png" alt="淮岸放生">
        </div>
      </div> -->
    <!-- </div> -->
  </Views>
</template>

<script>

import { mapGetters } from 'vuex';
import store from '../../store/index';
import Views from '@/components/Views';
import Images from '@/components/images';
import Refresh from '@/components/Refresh';
import Menus from '@/components/Menus';
import Swiper from '@/components/Swiper';
import Slide from '@/components/Slide';
import Title from '@/components/Title';
import { getDynamics } from '@/utils/apis';

export default {
  name: 'home',
  components: { Views, Refresh, Images, Menus, Swiper, Slide, Title },
  data: function() {
    return {
      products: [],
      topList: [],
      btmList: [],
      displayMenu: false
    };
  },
  computed: {
    ...mapGetters([
      'siteType',
      'tabIdx'
    ])
  },
  mounted () {
    store.dispatch('common/changeSiteType', 1);
    store.dispatch('common/getMenuType', 1);
    this.getDynamics();
  },
  methods: {
    async getDynamics () {
      let result = await getDynamics();
      let list = result.data.list;
      this.topList = list.slice(0, 1);
      this.btmList = list.slice(1);
    },
    humanSwiper (idx) {
      console.log(idx)
    },
    advSwiper (idx) {
      console.log(idx)
    },
    transitionStart(idx) {
      console.log(idx)
    },
    skipSite (idx) {
      if (idx === 1) { // 薪社汇
        location.href = 'https://m.xinshehui.linlongyun.com';
      } else if (idx === 2) { // 乐接活
        location.href = 'https://m.lejiehuo.linlongyun.com';
      } else if (idx === 3) { // 微办公
        location.href = 'https://www.weibangong.com/web-static/main/mobileIndex.html';
      } else { // 不木钱包
        location.href = 'https://m.bumuqianbao.linlongyun.com';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
    .banner{
      overflow: hidden;
      margin: 0;
      width: 100%;
      height: 100%;
      position: relative;
      text-align: center;
      .banner-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: url(https://qiniu.zuolinju.com/IMG_4093.JPG) center center no-repeat;
        background-size: cover;
        z-index: -1;
      }
      .container{
        position: relative;
        height: inherit;
        margin: 0 auto;
        z-index: 1;
        color: #fff;
        overflow: hidden;
        padding: 0 90px;
        .img{
          height: 100vh;
        }
        .title{
          text-align: left;
          margin-top: 500px;
          h1{
            position: relative;
            letter-spacing:0.5px;
            &:last-child{
              &::after{
                content: ' ';
                position: absolute;
                bottom: -40px;
                left: 0;
                width: 80px;
                height: 10px;
                background:linear-gradient(202deg,rgba(251,210,73,1) 0%,rgba(245,166,35,1) 100%);
              }
            }
          }
        }
        .desc{
          position: absolute;
          padding: 0 90px;
          bottom: 120px;
          left: 0;
          right: 0;
          text-align: center;
          width: 100%;
          display: flex;
          p{
            flex: 1;
            font-family:PingFangSC-Light,PingFangSC;
            letter-spacing:7px;
          }
        }
        .arrow{
          position: absolute;
          width: 100%;
          height: 12px;
          left: 0;
          bottom: 100px;
          // bottom: 20%;
          transform-origin: 0;
          animation-name: arrowDown;
          animation-iteration-count: infinite;
          animation-duration: 1s;
          animation-direction: normal;
          animation-timing-function: linear;
          img{
            width: 102px;
          }
        }
      }
    }
    .product{
      padding: 62px 0 0;
      text-align: center;
      .ptabs{
        margin-top: 80px;
        padding-bottom: 80px;
        background: $white;
        .h-swiper{
          height: 750px;
        }
        .slide{
          width: 590px;
          background: $white;
          box-shadow:0px 12px 40px 0px rgba(13,37,62,0.05);
          border-radius:8px;
          border:2px solid rgba(238,238,238,1);
          .human{
            .h-top{
              width: 100%;
              background:linear-gradient(201deg,rgba(64,189,251,1) 0%,rgba(30,136,245,1) 100%);
              box-shadow:0px 4px 60px 0px rgba(30,136,245,0.2);
              border-radius:8px 8px 0px 0px;
              padding: 40px;
              img{
                width: 80px;
                margin-bottom: 20px;
              }
              p{
                font-weight: 600;
              }
            }
            .h-top-yellow{
              background:linear-gradient(187deg,rgba(251,210,73,1) 0%,rgba(245,166,35,1) 100%);
            }
            .h-bottom{
              background: $white;
              padding: 70px 64px 70px;
              .h-text{
                position: relative;
                &:not(:first-child){
                  margin-top: 20px;
                }
                img{
                  width: 60px;
                  position: absolute;
                  left: 0;
                  top: -6px;
                }
                p{
                  text-align: left;
                  margin-left: 70px;
                }
              }
            }
          }
        }
      }
    }
    .advantage{
      padding: 0 40px;
      background:rgba(30,136,245,.03);
      padding-bottom: 80px;
      padding-top: 40px;
      .title{
        margin-bottom: 80px;
      }
      .a-cards{
        .a-item{
          display: flex;
          height: 308px;
          align-items: center;
          padding: 56px 66px 56px 96px;
          position: relative;
          background: $white;
          box-shadow:0px 12px 20px 0px rgba(30,136,245,0.06);
          border-radius:12px;
          margin-top: 60px;
          .avader{
            .a-1{
              width: 96px;
              height: 100px;
            }
            .a-2{
              width: 90px;
              height: 100px;
            }
            .a-3{
              width: 102px;
              height: 100px;
            }
            >div{
              position: absolute;
              top: 48px;
              left: 0;
              width: 56px;
              height: 24px;
              background: $blue;
              border-radius:0px 8px 0px 0px;
            }
          }
          .text{
            margin-left: 90px;
            text-align: left;
            h1{
              margin-bottom: 20px;
            }
            p{
              margin-bottom: 10px;
            }
          }
        }
      }
    }
    .customer{
      padding: 40px 0;
      .c-cards{
        margin-top: 80px;
        .c-swiper{
          height: 850px;
        }
        .slide{
          width: 600px;
          background: $white;
          box-shadow:0px 12px 20px 0px rgba(30,136,245,0.08);
          border-radius:16px;
          border:2px solid rgba(230,230,230,1);
          .c-content{
            padding: 100px 60px 56px;
            width: 100%;
            height: 100%;
            position: relative;
            .c-top{
              position: relative;
              >img{
                width: 60px;
              }
              .c-dot-1{
                position: absolute;
                top: -70px;
                left: -30px;
              }
              p{
                line-height: 1.6;
                text-align: left;
                text-indent:2em;
                font-family:PingFangSC-Light,PingFangSC;
              }
              .c-dot-2{
                position: absolute;
                bottom: -70px;
                right: -30px;
              }
            }
            .c-bottom{
              margin-top: 90px;
              width: 100%;
              overflow: hidden;
              .c-item{
                position: absolute;
                left: 0;
                bottom: 56px;
                padding-left: 56px;
                text-align: left;
                width: 100%;
                img{
                  height: 48px;
                  margin-bottom: 18px;
                }
              }
            }
          }
        }
      }
    }
    .activities{
      padding: 0 40px;
      text-align: center;
      .analyze{
        display: block;
        margin-top: 100px;
        padding-bottom: 40px;
        @include border(1px, $mark-4);
        .avader{
          position: relative;
          &::after{
            content: " ";
            position: absolute;
            width:100px;
            height:24px;
            background-color: rgba(30,136,245,.9);
            top: 0;
            left: 0;
            border-radius:0px 0px 6px 0px;
          }
          img{
            // width: 100%;
            object-fit: cover;
            height: 366px;
            width: 100%;
          }
        }
        .text{
          margin-top: 28px;
          padding: 0 40px;
          text-align: left;
          h1{
            font-weight: 400;
            color: #000;
          }
          p{
            margin-top: 20px;
            text-align: left;
          }
        }
      }
      .a-tabs{
        display: block;
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        .a-item{
          flex-basis: 316px;
          .avader{
            height: 156px;
            // width: 100%;
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .text{
            margin-top: 16px;
            p{
              text-align: left;
              color: #000;
            }
          }
        }
      }
    }
    .cooperative{
      margin-top: 80px;
      padding: 0 40px;
      // padding-bottom: 120px;
      margin-bottom: 120px;
      .partener{
        width: 100%;
        margin-top: 30px;
        img{
          width: 100%;
        }
      }
    }
  // }
  @keyframes arrowDown {
    0%,100% {
      opacity: .5;
      transform: translateY(0);
    }
    50% {
      opacity: 1;
      transform: translateY(10px);
    }
  }
</style>
